<template>
  <div class="transaction-details_mod" :class="themeClass">
    <v-nav :title="$t('TransactionDetails.Billing records')"></v-nav>
    <div class="transaction-details_mod_box">
      <van-sticky :offset-top="44">
        <div class="transaction-details_mod_box_tabs">
          <div class="moomoo-tabs">
            <van-tabs v-model="active" @click="onRefresh" color="#DAAB51">
              <van-tab :title="$t('TransactionDetails.all')"></van-tab>
              <van-tab :title="$t('TransactionDetails.Capital account')"></van-tab>
              <van-tab :title="$t('TransactionDetails.transaction account')"></van-tab>
            </van-tabs>
            <van-tabs v-model="actives" @click="onRefresh" color="#DAAB51">
              <van-tab :title="$t('TransactionDetails.all')" name="all"></van-tab>
              <van-tab :title="$t('TransactionDetails.type0')" name="0"></van-tab>
              <van-tab :title="$t('TransactionDetails.type1')" name="1"></van-tab>
              <van-tab :title="$t('TransactionDetails.type2')" name="2"></van-tab>
              <van-tab :title="$t('TransactionDetails.type3')" name="3"></van-tab>
              <van-tab :title="$t('TransactionDetails.type4')" name="4"></van-tab>
              <van-tab :title="$t('TransactionDetails.type5')" name="5"></van-tab>
              <van-tab :title="$t('TransactionDetails.type6')" name="6"></van-tab>
              <van-tab :title="$t('TransactionDetails.type7')" name="7"></van-tab>
              <van-tab :title="$t('TransactionDetails.type8')" name="8"></van-tab>
              <van-tab :title="$t('TransactionDetails.type9')" name="9"></van-tab>
              <van-tab :title="$t('TransactionDetails.type10')" name="10"></van-tab>
              <van-tab :title="$t('TransactionDetails.type11')" name="11"></van-tab>
              <van-tab :title="$t('TransactionDetails.type12')" name="12"></van-tab>
              <van-tab :title="$t('TransactionDetails.type13')" name="13"></van-tab>
              <van-tab :title="$t('TransactionDetails.type14')" name="14"></van-tab>
              <van-tab :title="$t('TransactionDetails.type15')" name="15"></van-tab>
              <van-tab :title="$t('TransactionDetails.type16')" name="16"></van-tab>
            </van-tabs>
          </div>
        </div>
      </van-sticky>
      <div class="transaction-details_mod_box_list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :pulling-text="$t('info.info3')" :loosing-text="$t('info.info4')" :loading-text="$t('info.info2')" :success-text="$t('info.info5')">
          <van-list v-model="loading" :finished="finished" :loading-text="$t('info.info2')" :finished-text="$t('info.info6')" @load="onLoad">
            <van-cell v-for="(item, index) in transactionDetailsList" :key="index" center :title="titleShow(item.type, item.property)" :label="item.create_time">
              <template #right-icon>
                <div class="van-cell__value">
                  <span :class="riseOrFall(+item.money)">{{ +item.money > 0 ? `+${item.money}` : item.money }}</span>
                  <span>{{ item.currencie }}</span>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'TransactionDetails',
  data() {
    return {
      page: 1,
      loading: false,
      finished: false,
      refreshing: false,
      transactionDetailsList: [],
      isDayTime: false,
      active: 0,
      actives: 0
    }
  },
  computed: {
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.isDayTime = newVal
      },
      immediate: true
    }
  },

  methods: {
    async getMoneyLogList() {
      await this.$https.get('/wallet/moneyLogList?page=' + this.page + '&property=' + this.active + '&type=' + this.actives).then(res => {
        if (this.refreshing) {
          this.transactionDetailsList = []
          this.refreshing = false
        }
        this.transactionDetailsList = [...this.transactionDetailsList, ...res.data.data]
        this.loading = false

        if (this.page >= res.data.last_page) {
          this.finished = true
        } else {
          this.page++
        }
      })
    },
    // 上拉加载处理函数
    onLoad() {
      this.getMoneyLogList()
    },
    // 下拉刷新处理函数
    onRefresh() {
      this.refreshing = true
      this.finished = false
      this.page = 1
      this.loading = true
      this.onLoad()
    },
    riseOrFall(money) {
      return money > 0 ? 'rise' : 'fall'
    },
    titleShow(status, property) {
      let title = ''
      switch (status) {
        case '0':
          title = this.$t('TransactionDetails.type0')
          break
        case '1':
          title = this.$t('TransactionDetails.type1')
          break
        case '2':
          title = this.$t('TransactionDetails.type2')
          break
        case '3':
          title = this.$t('TransactionDetails.type3')
          break
        case '4':
          title = this.$t('TransactionDetails.type4')
          break
        case '5':
          title = this.$t('TransactionDetails.type5')
          break
        case '6':
          title = this.$t('TransactionDetails.type6')
          break
        case '7':
          title = this.$t('TransactionDetails.type7')
          break
        case '8':
          title = this.$t('TransactionDetails.type8')
          break
        case '9':
          title = this.$t('TransactionDetails.type9')
          break
        case '10':
          title = this.$t('TransactionDetails.type10')
          break
        case '11':
          title = this.$t('TransactionDetails.type11')
          break
        case '12':
          title = this.$t('TransactionDetails.type12')
          break
        case '13':
          title = this.$t('TransactionDetails.type13')
          break
        case '14':
          title = this.$t('TransactionDetails.type14')
          break
        case '15':
          title = this.$t('TransactionDetails.type15')
          break
        case '16':
          title = this.$t('TransactionDetails.type16')
          break
      }
      switch (property) {
        case '0':
          title = '(' + this.$t('TransactionDetails.Capital account') + ') ' + title
          break
        case '1':
          title = '(' + this.$t('TransactionDetails.transaction account') + ') ' + title
          break
      }
      return title
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
